<template>
  <a-layout class="layout-demo">
    <a-layout-sider collapsible breakpoint="xl">
      <a-menu>
        <a-menu-item v-for="item in menuItems" :key="item.key" @click="goToPage(item)">{{ item.title }}</a-menu-item>
      </a-menu>

      <template #trigger="{ collapsed }">
        <IconCaretRight v-if="collapsed"></IconCaretRight>
        <IconCaretLeft v-else></IconCaretLeft>
      </template>
    </a-layout-sider>
    <a-layout>
      <a-layout-header> {{ clickItem.title }} </a-layout-header>
      <a-layout style="padding: 0 24px">
        <a-layout-content
          ><div>
            <router-view></router-view></div
        ></a-layout-content>
      </a-layout>
    </a-layout>
  </a-layout>
</template>

<script>
import { ref } from "vue";
import { useRouter } from "vue-router";
export default {
  name: "App",
  setup() {
    const clickItem = ref({ key: "homePage", title: "首页" });
    const router = useRouter();
    const menuItems = ref([
      { key: "homePage", title: "首页" },
      { key: "uploadDocument", title: "上传作品" },
      { key: "scorePage", title: "评分" },
      { key: "4", title: "联系" },
    ]);
    const goToPage = (item) => {
      clickItem.value = item;
      router.push(`/${item.key}`);
    };
    document.body.setAttribute("arco-theme", "dark");
    return {
      menuItems,
      clickItem,
      goToPage,
    };
  },
  mounted() {
    // 如果在组件挂载时需要设置 clickItem 的值，可以在这里操作
  },
};
</script>
<style lang="scss">
::v-deep #app {
  height: 100%;
  width: 100%;
}
.layout-demo {
  height: 100%;
  width: 100%;
}
</style>
